<template>
    <div v-loading="loading" class="bg-white rounded">
        <el-form :model="form" label-width="160px" class="pb-4">
            <el-tabs v-model="activeName" class="ml-4 pt-4">
                <el-tab-pane label="支付设置" name="first">
                    <el-table :data="tableData" border stripe>
                        <el-table-column label="支付形式">
                            <template #default="{ row }">
                                <div class="flex items-center">
                                    <el-image :src="row.src" fit="fill" :lazy="true" style="width:40px;height:40px" class="rounded mr-2"></el-image>
                                    <div>
                                        <h6>{{ row.name }}</h6>
                                        <small class="text-gray-500 flex mt-1"> {{row.desc}}</small>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="150">
                            <template #default="{ row }">
                                <el-button type="primary" @click="open(row.key)" text>配置</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="上传设置" name="second">
                </el-tab-pane>
            </el-tabs>
        </el-form>

        <FormDrawer title="配置" ref="formDrawerRef" @submit="submit">
            <!-- 支付宝配置 -->
            <el-form v-if="drawerType == 'alipay'" :model="form" label-width="80px">
                <el-form-item label="app_id">
                    <el-input v-model="form.alipay.app_id" style="width:90%" placeholder="app_id"></el-input>
                </el-form-item>
                <el-form-item label="ali_public_key">
                    <el-input v-model="form.alipay.ali_public_key" style="width:90%" placeholder="ali_public_key" type="textarea" rows="4"></el-input>
                </el-form-item>
                <el-form-item label="private_key">
                    <el-input v-model="form.alipay.private_key" style="width:90%" placeholder="private_key"></el-input>
                </el-form-item>
            </el-form>
            <!-- 微信配置 -->
            <el-form v-else :model="form" label-width="100px">
                <el-form-item label="公众号 APPID">
                    <el-input v-model="form.wxpay.app_id" style="width:90%" placeholder="app_id"></el-input>
                </el-form-item>
                <el-form-item label="小程序 APPID">
                    <el-input v-model="form.wxpay.miniapp_id" style="width:90%" placeholder="miniapp_id"></el-input>
                </el-form-item>
                <el-form-item label="小程序secret">
                    <el-input v-model="form.wxpay.secret" style="width:90%" placeholder="secret"></el-input>
                </el-form-item>
                <el-form-item label="app_id">
                    <el-input v-model="form.wxpay.app_id" style="width:90%" placeholder="app_id"></el-input>
                </el-form-item>
                <el-form-item label="商户号">
                    <el-input v-model="form.wxpay.mch_id" style="width:90%" placeholder="mch_id"></el-input>
                </el-form-item>
                <el-form-item label="API 密钥">
                    <el-input v-model="form.wxpay.key" style="width:90%" placeholder="key"></el-input>
                </el-form-item>
                <el-form-item label="cert_client">
                    <el-upload action="uploadAction" :headers="{token}" accept="'.pem" :limit="1" :on-success="uploadClientSuccess">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <p class="text-red-500">
                                {{ form.wxpay.cert_client? form.wxpay.cert_client:'还未配置' }}
                            </p>
                            <div class="el-upload__tip">
                                例如：apiclient_cert.pem
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="cert_key">
                    <el-upload :action="uploadAction" :headers="{token}" accept="'.pem" :limit="1" :on-success="uploadClientSuccess">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <p class="text-red-500">
                                {{ form.wxpay.cert_key? form.wxpay.cert_key:'还未配置' }}
                            </p>
                            <div class="el-upload__tip">
                                apiclient_key.pem
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
        </FormDrawer>
    </div>
</template>

<script setup>
import { ref, reactive, toDisplayString } from 'vue'
import { getSysconfig, setSysconfig, uploadAction } from '~/api/sysconfig.js'
import { toast } from '~/composables/util.js'
import { getToken } from "~/composables/auth.js"
import FormDrawer from '~/components/FormDrawer.vue'
const token = getToken()
const loading = ref(false)
const activeName = ref('first')
const formDrawerRef = ref(null)
const tableData = [
    {
        name: '支付宝支付',
        desc: '该系统支持即使到账接口',
        src: '/alipay.png',
        key: 'alipay'
    }, {
        name: '微信支付',
        desc: '该系统支持微信网页支付和扫码支付',
        src: '/wepay.png',
        key: 'wepay'
    }]
const form = reactive({
    "close_order_minute": 0, //未支付订单自动关闭时间：分钟，0不自动关闭
    "auto_received_day": 0, //已发货订单自动确认时间：天，0不自动收货
    "after_sale_day": 0, //已完成订单允许申请售后：天
    "alipay": {
        "app_id": "",
        "ali_public_key": "",
        "private_key": ""
    }, //支付宝支付配置 { app_id:"", ali_public_key:"", private_key:""}
    "wxpay": {
        "app_id": "",
        "miniapp_id": "",
        "secret": "",
        "appid": "",
        "mch_id": "",
        "key": "",
        "cert_client": "",
        "cert_key": ""
    }
})
// 获取数据的方法
function getData () {
    loading.value = true
    getSysconfig().then(res => {
        for (let i in form) {
            form[i] = res[i]
        }
    }).finally(() => {
        loading.value = false
    })
}
getData()


const submit = () => {
    loading.value = true
    setSysconfig(form).then(res => {
        toast('修改成功')
        getData()
    }).finally(() => {
        loading.value = false
    })
}
const drawerType = ref('alipay')
const open = (key) => {
    drawerType.value = key
    formDrawerRef.value.open()
}

const uploadClientSuccess = (response, uploadFile, uploadFiles) => {
    form.wxpay.cert_client = response.data
}


const uploadKeySuccess = (response, uploadFile, uploadFiles) => {
    form.wxpay.cert_key = response.data
}
</script>